<!doctype html>
<html lang="en">
  <head>
    <script type="module" crossorigin src="/frontend-mini-challenges/css/assets/index-BpUcgeIT.js"></script>
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/css/assets/navbar-C7CEKbuS.js">
    <link rel="modulepreload" crossorigin href="/frontend-mini-challenges/css/assets/header-B517VqJC.js">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/css/assets/navbar-Dkne97UN.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/css/assets/header-DAZPOirm.css">
    <link rel="stylesheet" crossorigin href="/frontend-mini-challenges/css/assets/index-BZ8BjBRZ.css">
  </head>
  <body>
    <div class="container">
      Dark mode: <input type="checkbox" id="themeSwitch" />

      <h1>The entire page color theme is controlled using CSS and JavaScript</h1>

      Contained dark mode:
      <input type="checkbox" id="innnerThemeSwitch" />

      <div class="inner-container">
        <h1>The container color scheme is controlled by only CSS</h1>
      </div>
    </div>
  </body>
</html>
